﻿<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>Notebook | Web Application</title>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/app.v2.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" cache="false" />
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js" cache="false"></script> <script src="js/ie/respond.min.js" cache="false"></script> <script src="js/ie/excanvas.js" cache="false"></script> <![endif]-->
</head>
<body>
<section class="hbox stretch"> <!-- .aside -->
  <aside class="bg-light aside b-r animated fadeInLeftBig">
    <section class="vbox">
      <header class="header b-b navbar"> <a class="btn btn-link pull-right visible-xs" data-toggle="class:show" data-target=".nav-primary"> <i class="fa fa-bars"></i> </a> <a href="index.html" class="navbar-brand">Documents</a> </header>
      <section class="scrollable">
        <nav class="nav-primary hidden-xs nav-docs">
          <ul class="nav">
            <li class="dropdown-header b-b b-light"><em>CSS</em></li>
            <li><a href="#icons">Icons</a></li>
            <li><a href="#animate">Animate</a></li>
            <li><a href="#colors">Colors</a></li>
            <li><a href="#layout">Layout</a></li>
            <li><a href="#offscreen">Off screen</a></li>
            <li class="dropdown-header b-b b-light"><em>Components</em></li>
            <li><a href="#toggle-class">Toggle class</a></li>
            <li><a href="#shift">Shift</a></li>
            <li><a href="#button-state">Button state</a></li>
            <li><a href="#dropdown-select">Dropdown select</a></li>
            <li class="dropdown-header b-b b-light"><em>Plugins</em></li>
            <li><a href="#plugins">Plugins docs</a></li>
            <li class="dropdown-header b-b b-light"><em>Applications</em></li>
            <li><a href="#notes">Notes</a></li>
          </ul>
        </nav>
      </section>
    </section>
  </aside>
  <!-- /.aside -->
  <section id="content">
    <section class="vbox">
      <section class="scrollable bg-light lter" data-spy="scroll" data-target=".nav-primary">
        <section id="docs">
          <div class="clearfix padder">
            <h3>Overview</h3>
            <h5 class="m-t-lg">A fully responsive web app / admin dashboard template.</h5>
            <h4>Features:</h4>
            <ul>
              <li>Built with Bootstrap 3.0</li>
              <li>Flat ui with clean style</li>
              <li>Many components</li>
              <li>Mobile widgets</li>
              <li>Fully responsive</li>
              <li>Web app layouts</li>
              <li>Html5 Markup & CSS3</li>
              <li>One RESTful api application</li>
            </ul>
            <h3 class="text-success">CSS <small>Extensible classes</small></h3>
            <div class="line"></div>
            <p id="bootstrap">For the bootstrap css and components, please check the <strong><a href="http://getbootstrap.com">Bootstrap 3.0</a></strong></p>
            <h4 id="icons" class="m-t-lg">LESS</h4>
            <p>This file's css is generated by LESS files. you can use the less.php to output the css. There are many Variables, Mixins you can use.</p>
            <h4 id="icons" class="m-t-lg">Icons</h4>
            <p>Use FontAwesome font icons, over 369 icons with version 4.0 and more will be added in the future, check <strong><a href="http://fortawesome.github.io/Font-Awesome/">FontAwesome</a></strong> for more details to see how to use and examples</p>
            <h4 id="animate" class="m-t-lg">Animate.css</h4>
            <p><a href="http://daneden.me/animate/"><strong>animate.css</strong></a> is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. do not use animate css to an element which contains the dropdown-menu, it will cut the edge.</p>
            <p><strong>animate.css on landing page</strong>: you can add animate css on the dom element when it appear in the viewpoint. <code>&lt;div data-ride="animated" data-animation="fadeInUp" data-delay="250">&lt;/div></code></p>
            <h4 id="colors" class="m-t-lg">Colors <small>use less file to build your colors</small></h4>
            <p>8 default color palettes, build colorful widgets. you can open the less/app.variables.less to config your own colors(<code>@brand-primary, @brand-success, @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark, @brand-light</code>). </p>
            <p>You can use the mixin wariant. use <code>.color-variant</code> and <code>.font-variant</code> to build the color scheme, check more details in the less/app.colors.less.</p>
            <div class="row">
              <div class="col-sm-3">
                <p>.bg-light</p>
                <div class="bg-light">
                  <h5 class="dker m-n wrapper">.dker</h5>
                  <h5 class="dk m-n wrapper">.dk</h5>
                  <h5 class=" m-n wrapper">.bg-light</h5>
                  <h5 class="lt m-n wrapper">.lt</h5>
                  <h5 class="lter m-n wrapper">.lter</h5>
                </div>
              </div>
              <div class="col-sm-3">
                <p>.bg-dark</p>
                <div class="bg-dark">
                  <h5 class="dker m-n wrapper">.dker</h5>
                  <h5 class="dk m-n wrapper">.dk</h5>
                  <h5 class=" m-n wrapper">.bg-dark</h5>
                  <h5 class="lt m-n wrapper">.lt</h5>
                  <h5 class="lter m-n wrapper">.lter</h5>
                </div>
              </div>
              <div class="col-sm-3">
                <p>.bg-black</p>
                <div class="bg-black">
                  <h5 class="dker m-n wrapper">.dker</h5>
                  <h5 class="dk m-n wrapper">.dk</h5>
                  <h5 class=" m-n wrapper">.bg-black</h5>
                  <h5 class="lt m-n wrapper">.lt</h5>
                  <h5 class="lter m-n wrapper">.lter</h5>
                </div>
              </div>
              <div class="col-sm-3">
                <p>.bg-primary</p>
                <div class="bg-primary">
                  <h5 class="dker m-n wrapper">.dker</h5>
                  <h5 class="dk m-n wrapper">.dk</h5>
                  <h5 class=" m-n wrapper">.bg-primary</h5>
                  <h5 class="lt m-n wrapper">.lt</h5>
                  <h5 class="lter m-n wrapper">.lter</h5>
                </div>
              </div>
            </div>
            <div class="row m-t-sm">
              <div class="col-sm-3">
                <p>.bg-success</p>
                <div class="bg-success">
                  <h5 class="dker m-n wrapper">.dker</h5>
                  <h5 class="dk m-n wrapper">.dk</h5>
                  <h5 class=" m-n wrapper">.bg-success</h5>
                  <h5 class="lt m-n wrapper">.lt</h5>
                  <h5 class="lter m-n wrapper">.lter</h5>
                </div>
              </div>
              <div class="col-sm-3">
                <p>.bg-info</p>
                <div class="bg-info">
                  <h5 class="dker m-n wrapper">.dker</h5>
                  <h5 class="dk m-n wrapper">.dk</h5>
                  <h5 class=" m-n wrapper">.bg-info</h5>
                  <h5 class="lt m-n wrapper">.lt</h5>
                  <h5 class="lter m-n wrapper">.lter</h5>
                </div>
              </div>
              <div class="col-sm-3">
                <p>.bg-warning</p>
                <div class="bg-warning">
                  <h5 class="dker m-n wrapper">.dker</h5>
                  <h5 class="dk m-n wrapper">.dk</h5>
                  <h5 class=" m-n wrapper">.bg-warning</h5>
                  <h5 class="lt m-n wrapper">.lt</h5>
                  <h5 class="lter m-n wrapper">.lter</h5>
                </div>
              </div>
              <div class="col-sm-3">
                <p>.bg-danger</p>
                <div class="bg-danger">
                  <h5 class="dker m-n wrapper">.dker</h5>
                  <h5 class="dk m-n wrapper">.dk</h5>
                  <h5 class=" m-n wrapper">.bg-danger</h5>
                  <h5 class="lt m-n wrapper">.lt</h5>
                  <h5 class="lter m-n wrapper">.lter</h5>
                </div>
              </div>
            </div>
            <h4 id="layout" class="m-t-lg">Layout</h4>
            <p>use .vbox(vertical box) and .hbox(horizontal box) to build the web application layout. you can build the complicated layout as you want.</p>
            <h5><strong>hbox</strong></h5>
            <p>hbox is a horizontal wrapper that you can put columns in it. you can put <code>&lt;aside></code> and <code>&lt;section></code> in it. </p>
            <pre><code class="html"><section class="hbox"><aside class="aside-lg"></aside><section></section></section></code></pre>
            <p>you can use <code>.aside, .aside-sm, .aside-md, .aside-lg</code> to set the width of an aside wrapper. also you can use the Bootstrap grid system, like <code>.col-6, .col-7</code>...</p>
            <p>.stretch box has the 100% height. <code>&lt;section class="hbox stretch">&lt;/section></code></p>
            <h5><strong>vbox</strong></h5>
            <p>vbox is a vertical wrapper that you can put the row in it. </p>
            <pre><code class="html"><section class="vbox"><header class="header"></header><section class="w-f"></section><footer class="footer"></footer></section></code></pre>
            <p>.w-f means this vbox have a footer</p>
            <p>.flex vbox let you put a flex height of the header/footer.</p>
            <pre><code class="html">&lt;section class="vbox flex"><header></header><section><section><section></section></section></section><footer></footer>&lt;/section></code></pre>
            <h5><strong>Example</strong></h5>
            <div class="row">
              <div class="col-sm-6">
                <p>.hbox</p>
                <div style="height:250px">
                  <div class="app">
                    <section class="hbox stretch bg-light">
                      <aside class="lt">aside</aside>
                      <section>section</section>
                      <aside class="dk">aside</aside>
                    </section>
                  </div>
                </div>
              </div>
              <div class="col-sm-6">
                <p>.vbox</p>
                <div style="height:250px">
                  <div class="app">
                    <section class="vbox bg-light">
                      <header class="header lt"><span class="pull-in">header</span></header>
                      <footer class="footer dk"><span class="pull-in">footer</span></footer>
                      <section>section</section>
                    </section>
                  </div>
                </div>
              </div>
            </div>
            <h5><strong>Application layout</strong></h5>
            <p>you can use the .app on the html tag to build the app layout <code>&lt;html class="app">&lt;/html></code></p>
            <h4 id="offscreen" class="m-t-lg">Off screen nav</h4>
            <p>Support three nav styles on mobile, "Pull down", "push left", "push right"</p>
            <h5><strong>Pull down</strong></h5>
            <p>use <code>data-toggle="class:show" data-target=".nav-primary"</code> to trigger the nav pull down in the header</p>
            <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:show" data-target=".nav-primary"> <i class="icon-reorder"></i> </a></code></pre>
            <h5><strong>off screen push left</strong></h5>
            <p>use <code>data-toggle="class:nav-off-screen" data-target="#nav"</code> to trigger the off screen nav</p>
            <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav"> <i class="icon-reorder"></i> </a></code></pre>
            <p>use <code>data-toggle="class:nav-off-screen" data-target="#nav"</code> to toggle back in the body</p>
            <pre><code class="html"><a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a></code></pre>
            <h5><strong>off screen push right</strong></h5>
            <p>use <code>data-toggle="class:nav-off-screen push-right" data-target="body"</code></p>
            <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen push-right" data-target="body"> <i class="icon-reorder"></i> </a></code></pre>
            <h3 class="text-info">Components <small>Lightweight components to best practice on mobile</small></h3>
            <div class="line"></div>
            <h4 id="toggle-class">Toggle class</h4>
            <p>It's easy to change a dom class by click on another dom element.</p>
            <h5><strong>Usage</strong></h5>
            <p> Add <code>data-toggle="class:className"</code> and <code>data-target="#target"</code> to a link or button to toggle a class. </p>
            <h5><strong>Example</strong></h5>
            <button class="btn btn-default m-b" id="btn" data-toggle="class:btn-success" data-target="#btn"> Toggle the background </button>
            <pre><code class="html"><button class="btn btn-default" data-toggle="class:btn-success" data-target="#btn"> Toggle the background </button></code></pre>
            <h4 id="shift" class="m-t-lg">Shift</h4>
            <p>Shift js let you change the dom which have different position from mobile to desktop, it avoid to use duplicate elements.</p>
            <div id="shift-target"><strong>Usage</strong></div>
            <p> Add <code>data-toggle="shift:insertBefore"</code> and <code>data-target="#target"</code> to the dom that you want to shift. </p>
            <div class="panel shift b-light" data-toggle="shift:insertBefore" data-target="#shift-target">
              <div class="panel-body">Put me before "Usage" on mobile</div>
            </div>
            <pre><code class="html"><div class="shift" data-toggle="shift:insertBefore" data-target="#shift-target"> Put me before "Usage" on mobile </div></code></pre>
            <p>it also support <code>data-toggle="shift:appendTo"</code>, <code>data-toggle="shift:prependTo"</code>, <code>data-toggle="shift:insertAfter"</code></p>
            <h4 id="button-state" class="m-t-lg">Button state</h4>
            <p>Change the button state when click on it. add <code>.text</code> <code>.text-active</code></p>
            <h5><strong>Example</strong></h5>
            <button class="btn btn-default m-b" data-toggle="button"> <span class="text">More</span> <span class="text-active">Less</span> </button>
            <pre><code class="html"><button class="btn btn-default" data-toggle="button"> <span class="text">More</span> <span class="text-active">Less</span> </button></code></pre>
            <h5><strong>With icons</strong></h5>
            <button class="btn btn-default m-b" data-toggle="button"> <span class="text"> <i class="fa fa-thumbs-up text-success"></i> 25 </span> <span class="text-active"> <i class="fa fa-thumbs-down text-danger"></i> 10 </span> </button>
            <pre><code class="html"><button class="btn btn-default" data-toggle="button"> <span class="text"> <i class="fa fa-thumbs-up text-success"></i> 25 </span> <span class="text-active"> <i class="fa fa-thumbs-down text-danger"></i> 10 </span> </button></code></pre>
            <h4 id="dropdown-select" class="m-t-lg">Dropdown select</h4>
            <p>Support radio and checkbox dropdown select</p>
            <h5><strong>Usage</strong></h5>
            <p>add <code>.dropdown-menu</code> class on dropdown-menu.</p>
            <div class="btn-group">
              <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle"> <span class="dropdown-label">Option1</span> <span class="caret"></span> </button>
              <ul class="dropdown-menu dropdown-select">
                <li class="active"><a href="#">
                  <input type="radio" name="d-s-r" checked="">
                  Option1</a></li>
                <li><a href="#">
                  <input type="radio" name="d-s-r">
                  Option2</a></li>
                <li><a href="#">
                  <input type="radio" name="d-s-r">
                  Option3</a></li>
                <li class="disabled"><a href="#">
                  <input type="radio" name="d-s-r" disabled="">
                  I'm disabled</a></li>
              </ul>
            </div>
            <pre class="m-t"><code class="html"><div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle"> <span class="dropdown-label">Option1</span> <span class="caret"></span> </button>
            <ul class="dropdown-menu dropdown-select">
                <li class="active"><a href="#">
                  <input type="radio" name="d-s-r" checked="">
                  Option1</a></li>
                <li><a href="#">
                  <input type="radio" name="d-s-r">
                  Option2</a></li>
                <li><a href="#">
                  <input type="radio" name="d-s-r">
                  Option3</a></li>
                <li class="disabled"><a href="#">
                  <input type="radio" name="d-s-r" disabled="">
                  I'm disabled</a></li>
              </ul>
            </div> </code></pre>
            <div class="btn-group">
              <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle"> <span class="dropdown-label" data-placeholder="Please select">Please select</span> <span class="caret"></span> </button>
              <ul class="dropdown-menu dropdown-select">
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-1">
                  Option1</a></li>
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-2">
                  Option2</a></li>
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-3">
                  Option3</a></li>
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-4">
                  Option4</a></li>
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-5">
                  Option5</a></li>
              </ul>
            </div>
            <pre class="m-t"><code class="html"><div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle"> <span class="dropdown-label" data-placeholder="Please select">Please select</span> <span class="caret"></span> </button>
            <ul class="dropdown-menu dropdown-select">
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-1">
                  Option1</a></li>
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-2">
                  Option2</a></li>
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-3">
                  Option3</a></li>
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-4">
                  Option4</a></li>
                <li><a href="#">
                  <input type="checkbox" name="d-s-c-5">
                  Option5</a></li>
              </ul>
            </div> </code></pre>
            <h3 class="text-info" id="plugins">Plugins</h3>
            <div class="line"></div>
            <div class="row">
              <div class="col-md-6">
                <h4 class="m-t-lg">Fuelux</h4>
                <p>Check the online <a href="https://github.com/ExactTarget/fuelux"><strong>document</strong></a>. </p>
                <p>enhanced the pillbox.</p>
                <h4 class="m-t-lg">Fullcalendar</h4>
                <p>Check the online <a href="http://arshaw.com/fullcalendar/"><strong>document</strong></a>. </p>
                <p>Use pillbox to create an event and drag on to the calendar. it also use jquery touch-punch to support on touchable screen.</p>
                <h4 class="m-t-lg">Calendar</h4>
                <p>Check the online <a href="https://github.com/xero/bootstrap_calendar"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Datatables</h4>
                <p>Check the online <a href="http://datatables.net/"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Google map</h4>
                <p>Check the online <a href="http://hpneo.github.com/gmaps/"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Markdown</h4>
                <p>Check the online <a href="https://github.com/OscarGodson/EpicEditor"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Nestable</h4>
                <p>Check the online <a href="http://dbushell.github.io/Nestable/"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Slider</h4>
                <p>Check the online <a href="http://www.eyecon.ro/bootstrap-slider"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">WYSISYG</h4>
                <p>Check the online <a href="http://github.com/mindmup/bootstrap-wysiwyg"><strong>document</strong></a>. </p>
              </div>
              <div class="col-md-6">
                <h4 class="m-t-lg">Sortable</h4>
                <p>Check the online <a href="http://farhadi.ir/projects/html5sortable"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Flotchart</h4>
                <p>Check the online <a href="http://www.flotcharts.org/"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Sparklines</h4>
                <p>Check the online <a href="http://omnipotent.net/jquery.sparkline"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Easy pie chart</h4>
                <p>Check the online <a href="http://rendro.github.io/easy-pie-chart"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Parsley</h4>
                <p>Check the online <a href="http://parsleyjs.org/"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Select2</h4>
                <p>Check the online <a href="http://ivaynberg.github.io/select2/"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Combodate</h4>
                <p>Check the online <a href="http://vitalets.github.io/combodate/"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Datepicker</h4>
                <p>Check the online <a href="http://www.eyecon.ro/bootstrap-datepicker"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">File-input</h4>
                <p>Check the online <a href="http://dev.tudosobreweb.com.br/bootstrap-filestyle/"><strong>document</strong></a>. </p>
                <h4 class="m-t-lg">Intro</h4>
                <p>Check the online <a href="https://github.com/usablica/intro.js"><strong>document</strong></a>. </p>
              </div>
            </div>
            <h3 class="text-primary">Applications <small>built with Backbone</small></h3>
            <div class="line"></div>
            <h4 id="notes" class="m-t-lg">Notes</h4>
            <p>Notes is web application with CRUD(create, read, update, delete) and Search function. it built with Backbone and underscore, also used moment.js for time display. it use backbone localStorage for data model. but also you can replace with the RESTful api. </p>
            <p>It use php <a href="http://www.slimframework.com/">Slim framework</a> for the RESTful api. </p>
            <ol>
              <li>Create a Mysql database 'app'</li>
              <li>Use the 'api/notes.sql' to create a note table</li>
              <li>Change the 'api/index.php' to config the database address/name/password</li>
              <li>Change the 'js/apps/notes.js', switch the 'localStorage' to 'url' in the Notelist collection. (comment the line 32 and remove the comment on line 35)</li>
            </ol>
            <h4 id="tasks" class="m-t-lg">Chrome app</h4>
            <p>For more how to build chrome app, please check <a href="http://developer.chrome.com/apps/first_app.html" class="text-info"><strong>here</strong></a> </p>
            <h4 class="m-t-lg">Cross browser compatibility</h4>
            <p>Use response.js to support IE8 media queries and html5.js to support html5 markups.</p>
            <pre><code class="html"><!--[if lt IE 9]> <script src="js/ie/respond.min.js" cache="false"></script> <script src="js/ie/html5.js" cache="false"></script> <script src="js/ie/excanvas.js" cache="false"></script> <![endif]--></code></pre>
          </div>
        </section>
      </section>
    </section>
  </section>
</section>
<script src="js/app.v2.js"></script> <!-- Bootstrap --> <!-- App -->
</body>
</html>
